<template>
 <div class="registered">
   <img src="@/assets/image/bg-image/bg1.jpg" alt="" class="bg">
<el-alert
    v-show="flag"
    :title= title
    :type= type
    :description= description
    @click="this.$router.push('/')"
    show-icon>
  </el-alert>
    <div class="regMainBox">
      <div class="discript">
        <h3>欢迎注册智能作平台</h3>
        <img src="@/assets/image/bg-image/bg2.png" class="bg2">
      </div>
      <div class="registered">
        <div class="title">
          <div class="switchBox">
              <div class="login" @click="this.$router.push('/')">
                  <span>登录</span>
              </div>
              <div class="reg" @click="this.$router.push('/registered')">
                <span>注册</span>
              </div>
          </div>
        </div>
        <div class="regBox">
            <el-form
            :model="person"
            :rules="rules"
            ref="person"
            status-icon 
            :label-position="labelPosition" 
            label-width="65px" 
            @keyup.enter.native="getRegister">
            <el-form-item label="用户名" prop="username">
              <el-input 
              v-model="person.username"
              placeholder="请输入用户名"
              clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
              v-model="person.password"
              placeholder="请输入密码"
              show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input 
              v-model="person.email"
              placeholder="请输入邮箱"
              clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input 
              v-model="person.phone"
              placeholder="请输入电话号码"
              clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" class="vcode" prop="code">
              <el-input 
              v-model="person.code"
              placeholder="请输入验证码"
              clearable
              style="width:50%;margin-right:15px"
              ></el-input>
              <el-button type="success" @click="getRegCode" style="width:100px" :disabled="wait_timer>0">
                <span
                v-show="showNum"
                v-bind:class="{num:wait_timer>0}" >
                {{this.wait_timer + "s "}}
                </span>
                <span 
                v-bind:class="{gray_span:wait_timer>0}">
                {{ getCodeText() }}
                </span>
              </el-button>
            </el-form-item>
          </el-form>
            <el-button
            type="success"
            @click="getRegister"
            style="width:250px;"
            >注册</el-button>
          </div>
      </div>
  </div>
 </div>
</template>

<script>
import api from '@/api/user_index.js'
 export default {
  name: 'registered' ,
 data () {
  var checkPhone = (rule, value, callback) => {
      console.log("电话:", value);
      if (value.trim() == "") {
        callback(new Error("请输入电话"));
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        callback(new Error("电话输入错误！"));
      } else {
        callback();
      }
    };
var checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback();
            }
            if (value) {
                setTimeout(() => {
                    var reg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
                    if (!reg.test(value)) {
                        callback(new Error('请输入有效的电子邮箱！'));
                    } else {
                        callback();
                    }
                }, 500);
            }
        }; 
 return {
   person:{
      code: '',
     	email: '',
      password: '',
      phone: '',
      username: '',
   },
   rules:{
     email: [{ required: true, message: '请输入邮箱', validator: checkEmail, trigger: "blur" }],
     username: [{ required: true, message:'请输入用户名', trigger: "blur" }],
     password: [{ required: true, message:'请输入密码', trigger: "blur" }],
     phone: [{ required: true, message: '请输入手机号', validator: checkPhone, trigger: "blur" }],
     code: [{ required: true, message: '请输入验证码', trigger: "blur" }],
   },
    title: '',
    description: '',
    type: 'success',
    flag:false,
    labelPosition:'left',
    showNum: false,
    wait_timer: false,
  }
 },
 methods:{
   getRegister(){
     api.getRegister(this.person).then((res) => {
       console.log(res)
       if(res.code === 200){
            this.flag = true
            this.title = "登录成功!"
            this.description = '3秒后跳转到登录页面'
            setTimeout(() => {
              this.$router.push('/')
            }, 3000);
        }else{
            this.flag = true
            this.type = 'error'
            this.title = res.message
        }
     }).catch((err) => {
          console.log(err)
      })
   },
    async getRegCode(){
      this.showNum = true;
      this.wait_timer = 60;
      var that = this;
      var timer_interval = setInterval(function() {
        if (that.wait_timer > 0) {
          that.wait_timer--;
        } else {
          clearInterval(timer_interval);
        }
      }, 1000); 
      api.getRegCode(this.person.email).then((res) => {
        console.log(res)
        if(res.code == 200 ){
          this.flag = true
          this.type = 'success'
          this.title = "正在发送验证码..."
        }else{
          this.flag = true
            this.type = 'error'
            this.title = res.message
        }
      })
   },
   getCodeText(){
     if (this.wait_timer > 0) {
        return "";
      }
      if (this.wait_timer === 0) {
        this.showNum = false;
        return "重新发送";
      }
      if (this.wait_timer === false) {
        return "发送验证码";
      }
   }
 }
}

</script>
<style scope lang="less">
.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -10;
  }
  .regMainBox{
    position: absolute;
    top: 15%;
    left: 25%;
    height: 400px;
    width: 750px;
    display: flex;
    // border: 1px solid #ddd;
    .discript{
      position: relative;
      left: 15px;
      width: 360px;
      height: 400px;
      color: #28627C;
      background-color: rgba(255, 255, 255, 0.5);
      text-align: center;
      img{
        width: 250px;
        height: 300px;
        border-radius: 8px;
      }
    }
    .registered{
      width: 400px;
      height: 400px;
      text-align: center;
      margin: auto;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      border: 1px solid #CBEAE2;
      box-shadow: 3px 3px 3px #ccc;
      // padding:0 50px;
      .title{
        height: 80px;
        .switchBox{
          display: flex;
          justify-content: space-around;
          height: 60px;
          width: 400px;
          .reg,.login{
            height: 55px;
            width: 250px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
            box-shadow: 1px 2px 2px #ccc;
          }
          .reg{
            border-left: 3px solid #67C23A;
          }
        }
      }
      .regBox{
        margin-left: 50px;
        width: 300px;
      }
    }
  }
</style>